/*
  学习目标：复用组件逻辑的三种方式- hoc- 高阶组件
*/

import React from "react";
import { logMouse } from "./hoc/logMouse";

const MyFooter = logMouse(Footer);
const MyMain = logMouse(Main);
const MyHeader = logMouse(Header);

export default function App() {
  return (
    <div>
      <MyHeader />
      <MyMain />
      <MyFooter />
    </div>
  );
}
function Header({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      <h1>
        x: {mouse.x} - y: {mouse.y}
      </h1>
    </div>
  );
}

function Main({ mouse, handleMouseMove }) {
  return (
    <div onMouseMove={handleMouseMove}>
      我是
      <h1>
        Main- x: {mouse.y} -y:{mouse.y}
      </h1>
    </div>
  );
}

function Footer({ mouse, handleMouseMove }) {
  return (
    <h1 onMouseMove={handleMouseMove}>
      Footer- x: {mouse.y} -y:{mouse.y}
    </h1>
  );
}
